<template>
	<!-- vue content -->
	<view class="common-body bg-common" style="position: relative;">
		<!-- <image src="@/static/img/title_bg.jpg" class="match-width" style="" mode="widthFix">
		</image> -->
		<bodyCustom title="上门服务 公益培训">
			<view class="pd-lr25 ver pd-t20">
				<view class="hor mg-t-20">
					<view class="font16 font-text-color-explain">培训信息</view>
				</view>
				<view class="bg-white corner20 pd-lr25 pd-tb25 mg-t-20">
					<view class="hor ver-center">
						<view class="font-text-color-black font16" style="width: 300rpx;">培训时间</view>
						<!-- <input class="font16 font-text-color-black line1" v-model="phone" placeholder="请选择时间"
							placeholder-style="color:#999999"></input> -->
						<view class="flex1"
							:class="{'font-text-color-black':showTime!='','font-text-color-explain':showTime==''}"
							@click="showDatetime=true">
							{{showTime==""?"请选择时间":showTime}}
						</view>
					</view>
					<view class="divider-hor mg-t-20"></view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-black font16" style="width: 300rpx;">所属地区</view>
						<view class="flex1" @click="showDistrict=true"
							:class="{'font-text-color-black':districtCode!='','font-text-color-explain':districtCode==''}">
							{{districtCode==""?"所属地区":findDistrictNameByCode(districtCode)}}
						</view>
					</view>
					<view class="divider-hor mg-t-20"></view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-black font16" style="width: 300rpx;">详细地址</view>
						<input class="font16 font-text-color-black line1" v-model="outAddress"
							placeholder-style="color:#999999" placeholder="请输入详细地址"></input>
					</view>
					<view class="divider-hor mg-t-20"></view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-black font16" style="width: 300rpx;">选择大队</view>
						<view class="flex1" @click="brigadeShow=true"
							:class="{'font-text-color-black':brigadeId!='','font-text-color-explain':brigadeId==''}">
							{{brigadeId==""?"选择大队":findBrigadeNameByCode(brigadeId)}}
						</view>
					</view>
				</view>

				<view class="hor mg-t-20">
					<view class="font16 font-text-color-explain">培训内容</view>
				</view>
				<view class="bg-white corner20 pd-lr25 pd-tb25 mg-t-20">
					<view class="hor ver-center">
						<view class="font-text-color-black font16" style="width: 300rpx;">培训类型</view>
						<view class="flex1"
							:class="{'font-text-color-black':outType!='','font-text-color-explain':outType==''}"
							@click="showOutType=true">
							{{outType==""?"请选择培训类型":findOutTypeByValue()}}
						</view>
					</view>
					<view class="divider-hor mg-t-20"
						v-if="(outType == 1 || outType == 4 || outType == 6 || outType == 9)"></view>
					<view class="hor ver-center mg-t-20"
						v-if="(outType == 1 || outType == 4 || outType == 6 || outType == 9)">
						<view class="font-text-color-black font16" style="width: 300rpx;">培训课程</view>
						<view class="flex1" @click="showLesson=true"
							:class="{'font-text-color-black':lessonId!='','font-text-color-explain':lessonId==''}">
							{{lessonId==""?"选择课程":findLessonNameByCode(lessonId)}}
						</view>
					</view>
				</view>
				<view class="hor mg-t-20">
					<view class="font16 font-text-color-explain">单位基本信息</view>
				</view>
				<view class="bg-white corner20 pd-lr25 pd-tb25 mg-t-20">
					<view class="hor ver-center">
						<view class="font-text-color-black font16" style="width: 300rpx;">单位名称</view>
						<input class="font16 font-text-color-black line1" v-model="companyName" placeholder="请输入单位名称"
							placeholder-style="color:#999999"></input>
					</view>
					<view class="divider-hor mg-t-20"></view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-black font16" style="width: 300rpx;">单位类型</view>
						<view class="flex1" @click="onClickCompayType"
							:class="{'font-text-color-black':companyType!=='','font-text-color-explain':companyType===''}">
							{{companyType===0?"行政单位":(companyType===1?"企业单位":"请选择类型")}}
						</view>
					</view>
					<view class="divider-hor mg-t-20" v-if="companyType==1"></view>
					<view class="hor ver-center mg-t-20" v-if="companyType==1">
						<view class="font-text-color-black font16" style="width: 300rpx;">统一社会信用代码</view>
						<input class="font16 font-text-color-black line1" v-model="companyCode"
							placeholder-style="color:#999999" placeholder="请输入税号"></input>
					</view>
					<view class="divider-hor mg-t-20"></view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-black font16" style="width: 300rpx;">联系人</view>
						<input class="font16 font-text-color-black line1" v-model="companyMan"
							placeholder-style="color:#999999" placeholder="请输入联系人"></input>
					</view>
					<view class="divider-hor mg-t-20"></view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-black font16" style="width: 300rpx;">联系电话</view>
						<input class="font16 font-text-color-black line1" v-model="companyPhone" type="number"
							placeholder-style="color:#999999" placeholder="请输入联系电话"></input>
					</view>
					<view class="divider-hor mg-t-20"></view>
					<view class="hor ver-center mg-t-20">
						<view class="font-text-color-black font16" style="width: 300rpx;">培训人数</view>
						<!-- <view class="flex1"
							:class="{'font-text-color-black':companyPersonScope!='','font-text-color-explain':companyPersonScope==''}"
							@click="showCompanyPersonScope">
							{{companyPersonScope==""?"请选择人数":findPersonScopeByValue(companyPersonScope).name}}
						</view> -->
						<input class="font16 font-text-color-black line1" v-model="companyPersonScope" type="number"
							placeholder-style="color:#999999" placeholder="请输入培训人数"></input>
					</view>
				</view>
				<view class="mg-t-40 hor hor-center" style="">
					<view style="" class="pd-tb15 bg-main font-color-white text-center corner10 match-width"
						@click="showOrder=true">提交预约</view>
				</view>
				<view style="height: 10vh;"></view>
			</view>

		</bodyCustom>

		<u-popup v-model="showOrder" mode="bottom" border-radius="14">
			<view class="ver pd-lr20 pd-tb50 ver-center">
				<image src="../../static/img/gzh_qrcode.jpg" style="width: 60vw;height: 60vw;"
					show-menu-by-longpress="true"></image>
				<view>请先长按关注公众号，以便及时接收通知</view>
				<view style="width: 400rpx;" class="pd-tb15 bg-main font-color-white text-center corner100 mg-t-40"
					@click="onClickYuYue()">我已关注确认预约</view>
			</view>
		</u-popup>


		<u-popup v-model="showDistrict" mode="bottom" border-radius="14">
			<view class="ver ver-center">
				<view class="hor match-width pd-lr10">
					<view class="flex1"></view>
					<image src="../../static/img/ic_close.png" style="height: 50rpx;width: 50rpx;"
						class="pd-lr10 pd-tb10" @click="showDistrict=false"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 60vh;">
					<view class="ver pd-lr20  ver-center">
						<view v-for="(item,index) in districtList" :key="index" style="line-height: 80rpx;"
							class="match-width corner10 text-center mg-b-10 "
							:class="{'bg-main':item.districtCode==districtCode,'bg-common':item.districtCode!=districtCode,'font-color-white':item.districtCode==districtCode,'font-text-color-black':item.districtCode!=districtCode}"
							@click="onClickDistrict(item,index)">
							{{item.cityName}}{{item.distinctName}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-popup v-model="brigadeShow" mode="bottom" border-radius="14">
			<view class="ver ver-center">
				<view class="hor match-width pd-lr10">
					<view class="flex1"></view>
					<image src="../../static/img/ic_close.png" style="height: 50rpx;width: 50rpx;"
						class="pd-lr10 pd-tb10" @click="brigadeShow=false"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 40vh;">
					<view class="ver pd-lr20  ver-center">
						<view v-for="(item,index) in brigadeList" :key="index" style="line-height: 80rpx;"
							class="match-width corner10 text-center mg-b-10 "
							:class="{'bg-main':item.brigadeId==brigadeId,'bg-common':item.brigadeId!=brigadeId,'font-color-white':item.brigadeId==brigadeId,'font-text-color-black':item.brigadeId!=brigadeId}"
							@click="onClickBrigade(item,index)">
							{{item.brigadeName}}-{{item.brigadeAddress}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<u-popup v-model="showLesson" mode="bottom" border-radius="14">
			<view class="ver ver-center">
				<view class="hor match-width pd-lr10">
					<view class="flex1"></view>
					<image src="../../static/img/ic_close.png" style="height: 50rpx;width: 50rpx;"
						class="pd-lr10 pd-tb10" @click="showLesson=false"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 60vh;">
					<view class="ver pd-lr20  ver-center">
						<view v-for="(item,index) in lessonList" :key="index" style="line-height: 80rpx;"
							class="match-width corner10 text-center mg-b-10 "
							:class="{'bg-main':item.lessonId==lessonId,'bg-common':item.lessonId!=lessonId,'font-color-white':item.lessonId==lessonId,'font-text-color-black':item.lessonId!=lessonId}"
							@click="lessonId=item.lessonId;showLesson=false">
							{{item.lessonName}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<u-popup v-model="showOutType" mode="bottom" border-radius="14">
			<view class="ver ver-center">
				<view class="hor match-width pd-lr10">
					<view class="flex1"></view>
					<image src="../../static/img/ic_close.png" style="height: 50rpx;width: 50rpx;"
						class="pd-lr10 pd-tb10" @click="showOutType=false"></image>
				</view>
				<scroll-view scroll-y="true" style="height: 60vh;">
					<view class="ver pd-lr20  ver-center">
						<view v-for="(item,index) in outTypeList" :key="index" style="line-height: 80rpx;"
							class="match-width corner10 text-center mg-b-10 "
							:class="{'bg-main':isSelectOutType(item.value),'bg-common':!isSelectOutType(item.value),'font-color-white':isSelectOutType(item.value),'font-text-color-black':!isSelectOutType(item.value)}"
							@click="onSelectOutType(item,index)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<u-picker mode="time" v-model="showDatetime" :params="params" @confirm="onConfirmTime"></u-picker>

		<view style="height: 75rpx;"></view>
	</view>


</template>
<script>
	import Vue from 'vue'

	let _this
	export default {
		data() {
			return {
				authUser: null,
				lessonOrderId: "",
				detail: {},

				showOrder: false,
				showDatetime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},

				showDistrict: false,
				districtList: [],

				showLesson: false,
				lessonList: [],

				//大队信息
				brigadeShow: false,
				brigadeList: [],

				showOutType: false,
				outTypeList: [{
					name: "理论授课",
					value: 1
				}, {
					name: "实操培训",
					value: 3
				}, {
					name: "指导疏散演练",
					value: 5
				}],
				companyPersonScopeList: [{
					name: "10-30人",
					value: 1
				}, {
					name: "30-50人",
					value: 2
				}, {
					name: "50-70人",
					value: 3
				}, {
					name: ">70人",
					value: 4
				}],

				showTime: "",
				districtName: "",
				districtCode: "",
				outAddress: "",
				brigadeId: "",

				outType: "",
				selectOutTypeList: [],

				lessonId: "",
				companyName: "",
				companyType: "",
				companyCode: "",
				companyMan: "",
				companyPhone: "",
				companyPersonScope: "",

			};
		},
		onReady: function() {
			var _this = this

		},
		onShow() { //页面恢复展示时

		},
		onLoad(option) { ////页面加载时
			_this = this
			this.initUser(option, this, true);

			this.getDistrictList();
			this.getLessonList();

		},
		onPageScroll(res) {
			// console.log("页面滚动了")
			uni.$emit('onPageScroll', res.scrollTop);
		},
		methods: {
			getDistrictList() {
				_this.sendRequest({
					url: "district/allList",
					data: {},
					method: "GET",
					page: _this,
					success: function(res) {
						_this.districtList = res.data;
					},
					codeFail: function(e) {},
					fail: function(e) {}
				})
			},
			getBrigadeList(districtCode) {
				_this.sendRequest({
					url: "brigade/listByDistrictCode",
					data: {
						districtCode: districtCode,
						status: 0
					},
					method: "GET",
					page: _this,
					success: function(res) {
						_this.brigadeList = res.data;
					},
					codeFail: function(e) {},
					fail: function(e) {}
				})
			},
			getLessonList() {
				_this.sendRequest({
					url: "lesson/listWxPaging",
					data: {
						pageNum: 1,
						pageSize: 500,
						status: 0
					},
					method: "GET",
					page: _this,
					success: function(res) {
						_this.lessonList = res.data.records;

					},
					codeFail: function(e) {},
					fail: function(e) {}
				})
			},
			requestSub() {
				uni.requestSubscribeMessage({
					tmplIds: ['eehBr0bbd7nnLfUFWeKpa6e87Cj50ygw3zgObVKTlPQ',
						'19ORxXNYLqJ7fDc4FWG33ScuqUmpLTkz5CYoPc2ilhU'
					],
					success(res) {


					}
				})
			},
			onClickYuYue() {
				if (!this.initUser(null, this, true)) {
					return
				}

				if (
					this.isEmpty(this.showTime) ||
					this.isEmpty(this.districtCode) ||
					this.isEmpty(this.outAddress) ||
					this.isEmpty(this.outType) ||
					this.isEmpty(this.companyName) ||
					this.isEmpty(this.companyMan) ||
					this.isEmpty(this.companyPhone) ||
					this.isEmpty(this.companyPersonScope)
				) {
					uni.showToast({
						title: "请填写完成表格",
						icon: "none",
						duration: 2000
					});
					_this.showOrder = false
					return;
				}

				if (this.companyType == 1 && this.isEmpty(this.companyCode)) {
					uni.showToast({
						title: "请填写公司统一社会信用代码",
						icon: "none",
						duration: 2000
					});
					_this.showOrder = false
					return;
				}

				if ((this.outType == 1 || this.outType == 4 || this.outType == 6 || this.outType == 9) && this.isEmpty(this
						.lessonId)) {
					uni.showToast({
						title: "请选择课程",
						icon: "none",
						duration: 2000
					});
					_this.showOrder = false
					return;
				}


				if (_this.platform == 4) {
					_this.requestSub()
				}
				uni.showModal({
					title: '确认预约',
					content: "请注意您填写的信息是否正确，预约后会有专人联系审核，请注意接听电话",
					confirmText: "预约",
					success: function(res) {
						if (res.confirm) {
							_this.sendRequest({
								url: "lessonOrder/applyOutLessonOrder",
								data: {
									openId: uni.getStorageSync('openid'),
									showTime: _this.showTime,
									districtCode: _this.districtCode,
									outAddress: _this.outAddress,
									outType: _this.outType,
									lessonId: _this.lessonId,
									companyName: _this.companyName,
									companyCode: _this.companyCode,
									companyMan: _this.companyMan,
									companyPhone: _this.companyPhone,
									companyPersonScope: _this.companyPersonScope,
									brigadeId: _this.brigadeId
								},
								method: "POST",
								page: _this,
								success: function(res) {
									uni.showModal({
										title: '提示',
										content: "预约成功",
										confirmText: "我知道了",
										showCancel: false,
										success: function(res) {
											// _this.getData()
											uni.navigateBack()
										}
									});
									_this.showOrder = false
								},
								fail: function(e) {}
							})
						}

					}
				});

			},
			onClickRecord() {
				uni.reLaunch({
					url: "/pages/tabbar/my"
				})
			},
			onImageError() {
				console.log("errere")
				this.detail.teacherPhoto = '../../static/img/default_avatar.jpg'
			},
			onConfirmTime(e) {
				this.showTime = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute + ":00";
			},
			findDistrictNameByCode(code) {
				for (var i = 0; i < this.districtList.length; i++) {
					if (this.districtList[i].districtCode == code) {
						return this.districtList[i].cityName + "-" + this.districtList[i].distinctName;
					}
				}
			},
			findBrigadeNameByCode(brigadeId) {
				for (var i = 0; i < this.brigadeList.length; i++) {
					if (this.brigadeList[i].brigadeId == brigadeId) {
						return this.brigadeList[i].brigadeName + "-" + this.brigadeList[i].brigadeAddress;
					}
				}
			},
			findLessonNameByCode(lessonId) {
				for (var i = 0; i < this.lessonList.length; i++) {
					if (this.lessonList[i].lessonId == lessonId) {
						return this.lessonList[i].lessonName;
					}
				}
			},


			findOutTypeByValue() {
				let name = ""
				for (var i = 0; i < this.outTypeList.length; i++) {
					for (var j = 0; j < this.selectOutTypeList.length; j++) {
						if (this.outTypeList[i].value == this.selectOutTypeList[j]) {
							name += "《" + this.outTypeList[i].name + "》";
						}
					}
				}
				return name;
			},

			findPersonScopeByValue(value) {
				for (var i = 0; i < this.companyPersonScopeList.length; i++) {
					if (this.companyPersonScopeList[i].value == value) {
						return this.companyPersonScopeList[i];
					}
				}
			},
			showCompanyPersonScope() {
				let list = []
				for (var i = 0; i < this.companyPersonScopeList.length; i++) {
					list.push(this.companyPersonScopeList[i].name)
				}
				uni.showActionSheet({
					itemList: list,
					success: function(res) {
						_this.companyPersonScope = _this.companyPersonScopeList[res.tapIndex].value
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			isSelectOutType(value) {
				for (var j = 0; j < this.selectOutTypeList.length; j++) {
					if (value == this.selectOutTypeList[j]) {
						return true;
					}
				}
				return false;
			},
			onSelectOutType(item, index) {
				if (!this.isSelectOutType(item.value)) {
					this.selectOutTypeList.push(item.value)
				} else {
					for (var j = 0; j < this.selectOutTypeList.length; j++) {
						if (item.value == this.selectOutTypeList[j]) {
							this.selectOutTypeList.splice(j, 1)
						}
					}
				}

				this.outType = 0;
				for (var i = 0; i < this.selectOutTypeList.length; i++) {
					this.outType += this.selectOutTypeList[i]
				}

				if (this.outType == 0) {
					this.outType = ""
				}
			},
			onClickDistrict(item, index) {
				this.districtCode = item.districtCode;
				this.showDistrict = false

				this.getBrigadeList(this.districtCode)
			},
			onClickBrigade(item, index) {
				this.brigadeId = item.brigadeId;
				this.brigadeShow = false

			},
			onClickCompayType() {
				uni.showActionSheet({
					itemList: ['行政单位', "企业单位"],
					complete: function(e) {
						_this.companyType = e.tapIndex;
						if (_this.companyType == 0) {
							_this.companyCode = "行政单位"
						}else{
							_this.companyCode = ""
						}
					}
				})
			}
		}
	};
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #edf3f1;
	}

	::placeholder {
		font-weight: normal;
	}
</style>